<template>
    <center>
        <div id="main" style="width: 800px;height:550px;"></div>
    </center>
</template>
<script>
import * as echarts from 'echarts';
export default {
    mounted(){
      var myChart = echarts.init(document.getElementById('main'));
      // 数据
      var dateBase = new Date();
      var year = dateBase.getFullYear();
      var dottedBase = +dateBase + 1000 * 3600 * 24;
      var weekCategory = [];

      var radarData = [];
      var radarDataAvg = [];
      var maxData = 12000;
      var weekMaxData = [];
      var weekLineData = [];


      // 周数据
      for (var i = 0; i < 7; i++) {
        // 日期
        var date = new Date(dottedBase -= 1000 * 3600 * 24);
        weekCategory.unshift([
          date.getMonth() + 1,
          date.getDate()
        ].join('/'));

        // 折线图数据
        weekMaxData.push(maxData);
        var distance = Math.round(Math.random() * 11000 + 500);
        weekLineData.push(distance);

        // 雷达图数据
        // 我的指标
        var averageSpeed = +(Math.random() * 5 + 3).toFixed(3);
        var maxSpeed = averageSpeed + (+(Math.random() * 3).toFixed(2));
        var hour = +(distance / 1000 / averageSpeed).toFixed(1);
        var radarDayData = [distance, averageSpeed, maxSpeed, hour];
        radarData.unshift(radarDayData);

        // 平均指标
        var distanceAvg = Math.round(Math.random() * 8000 + 4000);
        var averageSpeedAvg = +(Math.random() * 4 + 4).toFixed(3);
        var maxSpeedAvg = averageSpeedAvg + (+(Math.random() * 2).toFixed(2));
        var hourAvg = +(distance / 1000 / averageSpeed).toFixed(1);
        var radarDayDataAvg = [distanceAvg, averageSpeedAvg, maxSpeedAvg, hourAvg];
        radarDataAvg.unshift(radarDayDataAvg);
      }

      // 颜色设置
      var color = {
        linearYtoG: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 1,
          y2: 1,
          colorStops: [{
            offset: 0,
            color: '#f5b44d'
          }, {
            offset: 1,
            color: '#28f8de'
          }]
        },
        linearGtoB: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 1,
          y2: 0,
          colorStops: [{
            offset: 0,
            color: '#43dfa2'
          }, {
            offset: 1,
            color: '#28f8de'
          }]
        },
        linearBtoG: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 1,
          y2: 0,
          colorStops: [{
            offset: 0,
            color: '#1c98e8'
          }, {
            offset: 1,
            color: '#28f8de'
          }]
        },
        areaBtoG: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [{
            offset: 0,
            color: 'rgba(35,184,210,.2)'
          }, {
            offset: 1,
            color: 'rgba(35,184,210,0)'
          }]
        }
      };

      var option = {
        title: {
          text: '一周跑步数据',
          textStyle: {
            // color: '#fff',
            color : '#0A0A0A',
            fontSize: 32,
            fontWeight: 'normal'
          },
          subtext: year + '/' + weekCategory[6],
          subtextStyle: {
            // color: '#fff',
            color : '#0A0A0A',
            fontSize: 16,
          },
          top: 50,
          left: 80
        },
        legend: {
          top: 220,
          left: 80,
          orient: 'vertical',
          itemGap: 15,
          itemWidth: 12,
          itemHeight: 12,
          data: ['平均指标', '我的指标'],
          textStyle: {
            color: '#0A0A0A',
            fontSize: 14,
          },
        },
        tooltip: {
          trigger: 'item'
        },
        radar: {
          center: ['68%', '27%'],
          radius: '40%',
          name: {
            color: '#0A0A0A'
          },
          splitNumber: 8,
          axisLine: {
            lineStyle: {
              color: color.linearYtoG,
              opacity: .6
            }
          },
          splitLine: {
            lineStyle: {
              color: color.linearYtoG,
              opacity: .6
            }
          },
          splitArea: {
            areaStyle: {
              // color: '#fff',
              color : '#0A0A0A',
              opacity: .1,
              shadowBlur: 25,
              shadowColor: '#0A0A0A',
              shadowOffsetX: 0,
              shadowOffsetY: 5,
            }
          },
          indicator: [{
            name: '全程距离(m)',
            max: maxData,
            color:'#0A0A0A'
          }, {
            name: '平均速度(km/h)',
            max: 10,
            color:'#0A0A0A'
          }, {
            name: '最快速度(km/h)',
            max: 12,
            color:'#0A0A0A'
          }, {
            name: '总计时间(h)',
            max: 3.5,
            color:'#0A0A0A'
          }]
        },
        grid: {
          left: 90,
          right: 80,
          bottom: 40,
          top: '60%',
        },
        xAxis: {
          type: 'category',
          position: 'bottom',
          axisLine: true,
          axisLabel: {
            // color: 'rgba(255,255,255,.8)',
            color: 'rgba(10, 10, 10,.8)',
            fontSize: 12
          },
          data: weekCategory,
        },
        yAxis: {
          name: 'm',
          nameLocation: 'end',
          nameGap: 24,
          nameTextStyle: {
            // color: 'rgba(255,255,255,.5)',
            color: 'rgba(10, 10, 10,.8)',
            fontSize: 14
          },
          max: maxData,
          splitNumber: 4,

          axisLine: {
            lineStyle: {
              opacity: 0
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              // color: '#fff',
              color: '#0A0A0A',
              opacity: .1
            }
          },
          axisLabel: {
            // color: 'rgba(255,255,255,.8)',
            
            color: 'rgba(10, 10, 10,.8)',
            fontSize: 12

          }
        },
        series: [{
          name: '每日跑步指标分布与比较',
          type: 'radar',
          symbolSize: 0,
          color : '#0A0A0A',
          data: [{
            value: radarDataAvg[6],
            name: '平均指标',
            
            itemStyle: {
              normal: {
                color: '#f8d351',
              }
            },
            lineStyle: {
              normal: {
                opacity: 0,
              }
            },
            areaStyle: {
              normal: {
                color: '#f8d351',
                shadowBlur: 25,
                shadowColor: 'rgba(248,211,81,.3)',
                shadowOffsetX: 0,
                shadowOffsetY: -10,
                opacity: 1
              }
            },
          }, {
            value: radarData[6],
            name: '我的指标',
            
            itemStyle: {
              normal: {
                color: '#43dfa2',
              }
            },
            lineStyle: {
              normal: {
                opacity: 0,
              }
            },
            areaStyle: {
              normal: {
                color: color.linearGtoB,
                shadowBlur: 15,
                shadowColor: 'rgba(0,0,0,.2)',
                shadowOffsetX: 0,
                shadowOffsetY: 5,
                opacity: .8
              }
            },
          }]
        }, {
          name: '每日跑步里程',
          type: 'line',
          smooth: true,
          symbol: 'emptyCircle',
          symbolSize: 8,
          itemStyle: {
            normal: {
              // color: '#fff'
              color: '#0A0A0A'
            }
          },
          lineStyle: {
            normal: {
              color: color.linearBtoG,
              width: 3
            }
          },
          areaStyle: {
            normal: {
              color: color.areaBtoG,
            }
          },
          data: weekLineData,
          lineSmooth: true,
          markLine: {
            silent: true,
            data: [{
              type: 'average',
              name: '平均值'
            }],
            precision: 0,
            label: {
              normal: {
                formatter: '平均值: \n {c}'
              }
            },
            lineStyle: {
              normal: {
                color: 'rgba(248,211,81)'
              }
            }
          },
          tooltip: {
            position: 'top',
            formatter: '{c} m',
            backgroundColor: 'rgba(28,152,232,.2)',
            padding: 6
          }
        }, {
          name: '占位背景',
          type: 'bar',
          itemStyle: {
            normal: {
              show: true,
              color: '#000',
              opacity: 0
            }
          },
          silent: true,
          barWidth: '50%',
          data: weekMaxData,
          animation: false
        }, {
          name: '占位背景',
          type: 'bar',
          itemStyle: {
            normal: {
              show: true,
              color: '#000',
              opacity: .1
            }
          },
          silent: true,
          barWidth: '50%',
          barGap: 0,
          data: weekMaxData,
          animation: false
        }],
        // backgroundColor: '#383546',
        backgroundColor: '#F5FFFA',
      };

    // 点击事件
      myChart.on('click', function(params) {
        if (params.componentType === 'series' && params.seriesType === 'line') {

          var dataIndex = params.dataIndex;
          myChart.setOption({
            series: [
            {
          name: '每日跑步指标分布与比较',
          type: 'radar',
          symbolSize: 0,
          data: [{
            name: '平均指标',
            value: radarDataAvg[dataIndex],
            itemStyle: {
              normal: {
                color: '#f8d351',
              }
            },
            lineStyle: {
              normal: {
                opacity: 0,
              }
            },
            areaStyle: {
              normal: {
                color: '#f8d351',
                shadowBlur: 25,
                shadowColor: 'rgba(248,211,81,.3)',
                shadowOffsetX: 0,
                shadowOffsetY: -10,
                opacity: 1
              }
            },
          }, {
            name: '我的指标',
            color: '#0A0A0A',
            value: radarData[dataIndex],
            itemStyle: {
              normal: {
                color: '#43dfa2',
              }
            },
            lineStyle: {
              normal: {
                opacity: 0,
              }
            },
            areaStyle: {
              normal: {
                color: color.linearGtoB,
                shadowBlur: 15,
                shadowColor: 'rgba(0,0,0,.2)',
                shadowOffsetX: 0,
                shadowOffsetY: 5,
                opacity: .8
              }
            },
          }]
        }]
          })
        }
      });
      myChart.setOption(option);
    },       
}
</script>
